---
title: "Badge"
description: A small, attention-grabbing UI element used to display notifications, status indicators, or counts in a compact format.
order: 1
published: true
---


## Basic

A badge is a small label that displays additional information, such as a count or status. It's commonly used to highlight something important, like unread messages, notifications, or status updates. Think of it as a quick visual cue to grab your attention.
<How toUse="statuses/badge/badge-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/badge
```

## Manual installation
<SourceCode toShow='badge'/>

## Intent
Badges come in a variety of colors: primary, secondary, success, info, warning, danger, light, dark, and light/dark. You can even use custom colors if you want.
<How  toUse="statuses/badge/badge-intent-demo" />

## Shape
By default, badges are square, but you can switch to a circular shape if desired.
<How toUse="statuses/badge/badge-shape-demo" />
